<template>
	<!-- <div class="list" v-if="message && message.id > 0">
		<div class="title">
			<div class="avatar">
				{{ formatUsername(message.realName) }}
			</div>
			{{ message.realName }}
			<div
				:class="[
					'tip',
					{
						success: message.approveStatus === '02',
						error: message.approveStatus === '03',
					},
				]"
				v-if="['02', '03'].includes(message.approveStatus)"
			>
				{{ message.approveStatus === "02" ? "已同意" : "已驳回" }} · {{ message.approveDate }}
			</div>
		</div>
		<div class="remark" v-if="['02', '03'].includes(message.approveStatus) && message.approveOpinion">
			{{ message.approveOpinion }}
		</div>

		<el-button type="text" v-if="message.image || message.file" @click="onShowAnnexes">查看附件</el-button>
	</div> -->
	<el-card class="el-card" v-if="message && message.id > 0">
		<el-descriptions :column="1" border>
			<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content">
				<template slot="label">
					<div class="el-descriptions-item-label">
						<i class="el-icon-user"></i>
						办理人
					</div>
				</template>
				{{ message.realName }}
			</el-descriptions-item>
			<template v-if="['02', '03'].includes(message.approveStatus)">
				<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content">
					<template slot="label">
						<div class="el-descriptions-item-label">
							<i class="el-icon-date"></i>
							接收时间
						</div>
					</template>
					{{ message.startDate }}
				</el-descriptions-item>
				<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content" v-if="nodeTypeName != 'CS'">
					<template slot="label">
						<div class="el-descriptions-item-label">
							<i class="el-icon-document"></i>
							处理结果
						</div>
					</template>
					<div :class="[message.approveStatus === '02' ? 'success' : 'error']">
						<i :class="[message.approveStatus === '02' ? 'el-icon-check' : 'el-icon-close']"></i>
						{{ message.approveStatus === "02" ? "已同意" : "已驳回" }}
					</div>
				</el-descriptions-item>
				<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content">
					<template slot="label">
						<div class="el-descriptions-item-label">
							<i class="el-icon-date"></i>
							处理时间
						</div>
					</template>
					{{ message.approveDate }}
				</el-descriptions-item>
				<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content">
					<template slot="label">
						<div class="el-descriptions-item-label">
							<i class="el-icon-time"></i>
							耗时
						</div>
					</template>
					{{ message.timeConsuming }}
				</el-descriptions-item>
				<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content" v-if="message.approveOpinion">
					<template slot="label">
						<div class="el-descriptions-item-label">
							<i class="el-icon-document"></i>
							处理意见
						</div>
					</template>
					<div class="approveOpinion">
						{{ message.approveOpinion }}
					</div>
				</el-descriptions-item>
				<el-descriptions-item hide-timestamp content-class-name="el-descriptions-item-content" v-if="message.image || message.file">
					<template slot="label">
						<div class="el-descriptions-item-label">
							<i class="el-icon-folder"></i>
							附件意见
						</div>
					</template>
					<el-button icon="el-icon-view" type="text" v-if="message.image || message.file" @click="onShowAnnexes">
						查看附件
					</el-button>
				</el-descriptions-item>
			</template>
		</el-descriptions>
	</el-card>
</template>

<script>
export default {
	name: "user",
	props: {
		message: {
			type: Object,
			default: () => {},
		},
		nodeTypeName: {
			type: String,
			default: "",
		},
	},
	data() {
		return {}
	},
	computed: {},
	methods: {
		formatUsername: name => (name ? name.slice(0, 2) : ""),

		onShowAnnexes() {
			this.$emit("showAnnexes", this.message)
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.el-card {
	margin-bottom: 20px;
}
.success {
	color: #67c23a;
}
.error {
	color: #f56c6c;
}
.approveOpinion {
	white-space: wrap;
}
</style>

<style lang="scss">
.el-descriptions-item-label {
	white-space: nowrap;
	width: 80px;
}
.el-descriptions-item-content {
	width: 10000px;
}
</style>
